<template>
  <header class="shopping-nav">
    <!-- 品牌与Logo区域 -->
    <div class="nav-header">
      <el-icon class="shop-icon">
        <ShoppingBag />
      </el-icon>
      <h1 class="brand-name">Shopease</h1>
    </div>

    <!-- 导航菜单 -->
    <nav class="nav-menu">
      <ul class="menu-list">
        <li
            v-for="(item, index) in menuList"
            :key="index"
            @click="handleMenuClick(item.path)"
            :class="{ active: currentPath === item.path }"
        >
          <el-icon v-if="item.label==='购物车'">
            <ShoppingCart />
          </el-icon>
          {{ item.label }}
        </li>
      </ul>
      <el-dropdown @command="handleUserCommand">
        <div class="user-trigger">
          <span class="user-text" >收藏夹</span>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="profile">收藏的宝贝</el-dropdown-item>
            <el-dropdown-item command="orders">收藏的店铺</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </nav>

    <!-- 搜索区域 -->
    <div class="search-area">
      <!-- 外层容器用于包裹搜索框和按钮，实现整体样式控制 -->
      <div class="search-container">
        <el-input
            v-model="searchQuery"
            placeholder="搜索商品..."
            clearable
            class="search-input"
            @keyup.enter="handleSearch"
        >
        </el-input>
        <div class="search-btn" @click="handleSearch">
          <el-icon style="color: #fff;">
            <Search />
          </el-icon>
        </div>
      </div>
    </div>

    <!-- 功能图标区域 -->
    <div class="nav-actions">

      <!-- 用户中心 -->
      <el-dropdown @command="handleUserCommand">
        <div class="user-trigger">
          <el-icon>
            <User />
          </el-icon>
          <span class="user-text" v-if="isLoggedIn">{{username}}</span>
          <span class="user-text" v-else>请登录</span>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="profile">个人中心</el-dropdown-item>
            <el-dropdown-item command="orders">我的订单</el-dropdown-item>
            <el-dropdown-item command="favorites">收藏夹</el-dropdown-item>
            <el-dropdown-item command="settings">设置</el-dropdown-item>
            <el-dropdown-item command="logout" v-if="isLoggedIn">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </header>
</template>

<script setup>
import { ref, computed } from 'vue';
import {
  ShoppingBag,
  ShoppingCart,
  Search,
  User
} from '@element-plus/icons-vue';
import { ElInput, ElDropdown, ElDropdownMenu, ElDropdownItem, ElIcon } from 'element-plus';
import { useRouter } from 'vue-router';
import { AuthService } from '@/service/auth';
const authService = new AuthService();
const username=ref(authService.getUser().username);

const router = useRouter();
// 导航菜单数据
const menuList = ref([
  { label: '淘宝宝首页', path: '/' },
  { label: '已买到的宝贝', path: '/categories' },
  { label: '我的足迹', path: '/hot' },
  { label: '购物车', path: '/new' },
]);
// 当前路由路径，用于菜单激活态
const currentPath = computed(() => router.currentRoute.value.path);
// 搜索关键词
const searchQuery = ref('');

// 用户登录状态（模拟）
const isLoggedIn = ref(false);
isLoggedIn.value = authService.getUser() !== null;
// 搜索方法
const handleSearch = () => {
  if (searchQuery.value.trim()) {
    router.push({
      path: '/search',
      query: { q: searchQuery.value }
    });
    searchQuery.value = '';
  }
};
// 菜单点击处理
const handleMenuClick = (path) => {
  router.push(path);
};
// 购物车跳转
const goToCart = () => {
  router.push('/cart');
};
// 用户下拉菜单命令处理
const handleUserCommand = (command) => {
  switch(command) {
    case 'profile':
      router.push('/profile');
      break;
    case 'orders':
      router.push('/orders');
      break;
    case 'favorites':
      router.push('/favorites');
      break;
    case 'settings':
      router.push('/settings');
      break;
    case 'login':
      router.push('/login');
      break;
    case 'logout':
      // 模拟退出登录逻辑
      isLoggedIn.value = false;
      break;
  }
};
</script>

<style scoped>
.shopping-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 60px;
  /* 浅蓝绿色渐变背景 */
  background: linear-gradient(135deg, #f0f9f9 0%, #e6f7f7 100%);
  box-shadow: 0 2px 8px rgba(0, 128, 128, 0.08);
}

.nav-header {
  display: flex;
  align-items: center;
}

.shop-icon {
  font-size: 28px;
  color: #00a8a8;
  margin-right: 8px;
}

.brand-name {
  font-size: 20px;
  font-weight: 700;
  color: #2d6a6a;
}

.nav-menu {
  display: flex;
  align-items: center;
}

.menu-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-list li {
  margin: 0 15px;
  cursor: pointer;
  color: #4d7c7c;
  transition: color 0.3s;
}

.menu-list li:hover,
.menu-list li.active {
  color: #00a8a8;
}

.search-area {
  flex: 1;
  max-width: 500px;
  margin: 0 20px;
}

/* 新增搜索容器，用于控制整体尺寸 */
.search-container {
  display: flex;
  height: 50px; /* 与父容器高度一致 */
  width: 100%;
}

/* 搜索框样式调整 */
.search-input .el-input__wrapper {
  border: none;
  box-shadow: none;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 8px 0 0 8px; /* 左侧圆弧，右侧平直 */
  height: 100%; /* 占满容器高度 */
  font-size: 16px;
  border-right: none; /* 移除右侧边框 */
  padding-right: 0; /* 移除右侧内边距 */
}

/* 搜索按钮样式 - 与父容器完全匹配 */
.search-btn {
  background-color: #ff7d00;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 8px 8px 0; /* 右侧圆弧，左侧平直与输入框衔接 */
  cursor: pointer;
  height: 100%; /* 与父容器高度一致 */
  min-width: 50px; /* 确保按钮最小宽度 */
}

.nav-actions {
  display: flex;
  align-items: center;
}

.cart-icon {
  position: relative;
  margin-right: 20px;
  cursor: pointer;
  color: #4d7c7c;
  transition: color 0.3s;
}

.cart-icon:hover {
  color: #00a8a8;
}

.cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  background-color: #00a8a8;
  color: #fff;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 50%;
}

.user-trigger {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #4d7c7c;
  transition: color 0.3s;
}

.user-trigger:hover {
  color: #00a8a8;
}

.user-text {
  margin-left: 4px;
}

/* 响应式简易适配 */
@media (max-width: 768px) {
  .brand-name {
    font-size: 16px;
  }
  .menu-list li {
    margin: 0 10px;
    font-size: 14px;
  }
  .search-area {
    max-width: 300px;
    margin: 0 10px;
  }
  .user-text {
    display: none;
  }
}
</style>